<template>
  <div v-loading="loading">
    <div class="cbody">
      <div class="top">
        <div :class="dayChange == 0 ? 'hac' : ''" @click="setDays(0)">全部</div>
        <div :class="dayChange == 1 ? 'hac' : ''" @click="setDays(1)">今日</div>
        <div :class="dayChange == 2 ? 'hac' : ''" @click="setDays(2)">近7天</div>
        <div :class="dayChange == 3 ? 'hac' : ''" @click="setDays(3)">近30天</div>
      </div>
      <div class="info">
        <div class="head">
          <div>
            <div class="name">平台营业额</div>
            <div class="count">￥{{money.pt.toFixed(2)}}</div>
          </div>
          <div>
            <div class="name">合伙人收入</div>
            <div class="count">￥{{money.hh.toFixed(2)}}</div>
          </div>
          <div>
            <div class="name">服务商收入</div>
            <div class="count">￥{{money.fw.toFixed(2)}}</div>
          </div>
          <div>
            <div class="name">平台佣金</div>
            <div class="count">￥{{money.yj.toFixed(2)}}</div>
          </div>
        </div>
        <div class="screen">
          <img src="../../images/main/screen.png" alt> 筛选查询
        </div>
        <div class="sel">
          <span>名称：</span>
          <input type="text" placeholder="服务商名称/合伙人" v-model="params.keyWord">
          <span>当前状态：</span>
          <select name v-model="params.states">
            <option value="-1">请选择</option>
            <option value="0">待审核</option>
            <option value="1">待打款</option>
            <option value="2">已打款</option>
            <option value="3">已驳回</option>
          </select>
          <div class="sel-btn" @click="getFinList">查询</div>
        </div>
        <!--  <div class="tabs">
            <div class="tabac">合伙人</div>
            <div @click="error()">服务商</div>
        </div>-->
        <div class="tabs">
          <!-- <div class="tabac">合伙人</div>
          <div>服务商</div>-->
          <div
            v-for="( item, index ) in type.tab"
            :key="item.value"
            @click="tabClick( item )"
            :class="item.selected ? 'tabac' : ''"
          >{{ item.label }}</div>
        </div>
        <div class="table">
          <div class="thead">
            <div class="username">名称</div>
            <div class="account">银行账户信息</div>
            <div class="phone">手机号</div>
            <div class="txmoney">提现金额</div>
            <div class="sqtime">申请时间</div>
            <div class="states">当前状态</div>
            <div class="ctrl">操作</div>
          </div>
          <div
            class="tbody"
            style="height:50px;line-height:50px;text-align:center;"
            v-if="info.withDrawalList.length == 0"
          >暂无数据</div>
          <div v-else class="tbody" v-for="(item,index) in info.withDrawalList" :key="index">
            <div class="username firstchild">
              <span>{{item.account_name}}</span>
            </div>
            <div class="account">
              <div >{{item.bank_name}}</div>
              <div v-if="params.type == 2 && item.is_qi" >{{item.duty_paragraph}}</div>
              <div>{{item.bank_account}}</div>
            </div>
            <div class="phone">15855236985</div>
            <div class="txmoney">{{(item.price).toFixed(2)}}</div>
            <div class="sqtime">{{setDate(item.time)}} {{setTime(item.time)}}</div>
            <div class="states" v-if="item.states == 0">待审核</div>
            <div class="states" v-if="item.states == 1">审核通过未打款</div>
            <div class="states" v-if="item.states == 2">审核通过已打款</div>
            <div class="states" v-if="item.states == 3">审核失败</div>
            <div class="ctrl" v-if="item.states == 0 && roleList.search('提现审核') != '-1'">
              <span>
                <a @click="operation(item.id,1)">通过审核</a> |
                <a @click="operation(item.id,3)">驳回</a>
              </span>
            </div>
            <div class="ctrl" v-if="item.states == 1  && roleList.search('打款完成') != '-1'">
              <a @click="operation(item.id,2)">打款完成</a>
            </div>
            <div class="ctrl" v-if="item.states == 2"></div>
            <div class="ctrl" v-if="item.states == 3">
              <span>驳回原因：当前服务商/合伙人有违规行为，平台暂不处理</span>
            </div>
            <!-- <div class="ctrl">
                <span
                  v-if="item.states == 0"
                  style="color: #5FB878;"
                  >
                  <a
                    href="javascript:;"
                    style="color: #5FB878;"
                    @click="operation({
                      id: item.id,
                      type: 1
                    })"
                    >
                    通过审核
                  </a>
                  &nbsp;|&nbsp;
                  <a
                    href="javascript:;"
                    style="color: #5FB878;"
                    @click="operation({
                      id: item.id,
                      type: 3
                    })"
                    >
                    驳回
                  </a>
                </span>
                <a
                  v-else="item.states == 1"
                  style="color: #5FB878;"
                  @click="operation({
                    id: item.id,
                    type: 2
                  })"
                  >
                  打款完成
                </a>
                <span v-else="item.states == 3">{{ item.reason }}</span>
            </div>-->
          </div>
          <div style="height:60px;"></div>
        </div>

        <div style="padding: 50px 0; text-align: center;">
          <el-pagination
            class="el-pagination"
            background
            layout="prev, pager, next"
            :page-count="pageTotal"
            @current-change="changePage"
          ></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Global from "../tool/Global.vue";
import axios from "axios";
import qs from "qs"; // 将请求转换成form 表单提交形式
export default {
  data() {
    return {
      loading: false,
      type: {
        tab: [
          {
            label: "合伙人",
            value: 2,
            selected: true
          },
          {
            label: "服务商",
            value: 1,
            selected: false
          }
        ],
        current: ""
      },
      params: {
        keyWord: "",
        states: -1,
        limit: 10,
        page: 1,
        type: 2
      },
      money: {
        pt: 0,
        hh: 0,
        fw: 0,
        yj: 0
      },
      info: {
        withDrawalList: []
      },
      pageTotal: 1,
      dayChange: 0,
      roleList: ""
    };
  },
  methods: {
    /**
     *  获取权限
     */
    getRole: function() {
      let that = this;
      axios({
        method: "post",
        url: `${that.$store.state.url}/sysPermission/selectByEmployeeId`,
        data: qs.stringify({
          empId: that.$cookie.get("pid")
        })
      }).then(res => {
        console.log(res);
        let arr = res.data.data;
        let role = [];
        for (let i = 0; i < arr.length; i++) {
          role.push(arr[i].name);
        }
        this.roleList = role.toString();
      });
    },
    // 分页
    changePage(argv) {
      this.params.page = argv;
      this.getFinList();
    },
    // 切换身份
    tabClick(item) {
      for (let i = 0, len = this.type.tab.length; i < len; i++) {
        let item = this.type.tab[i];
        item.selected = false;
      }
      item.selected = true;
      this.params.type = item.value;
      this.getFinList();
    },
    // 操作
    operation(id, type) {
      let _this = this;
      if (type == 1 || type == 2) {
        this.$confirm(type == 1 ? "确认通过审核？" : "是否确认打款完成？").then(() => {
          axios
            .post(
              `${this.$store.state.url}/tWithdrawal/updateStates`,
              qs.stringify({
                id: id,
                states: type
              })
            )
            .then(response => {
              _this.$message("操作成功");
              _this.getFinList();
            });
        });
      } else {
        this.$prompt("驳回原因", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消"
        }).then(({ value }) => {
          axios
            .post(
              `${this.$store.state.url}/tWithdrawal/updateStates`,
              qs.stringify({
                id: id,
                states: type,
                reason: value
              })
            )
            .then(response => {
              _this.$message("操作成功");
              _this.getFinList();
            });
        });
      }
    },

    error: function() {
      alert("系统错误，请稍后重试！");
    },
    /**
     * 审核
     */
    examine: function(id, num) {
      this.loading = true;
      let that = this;
      axios({
        method: "post",
        url: `${that.$store.state.url}/tWithdrawal/updateStates`,
        data: qs.stringify({
          id: id,
          states: num
        })
      }).then(
        res => {
          this.loading = false;
          if (res.data.code == 0) {
            that.getFinList();
          } else {
            alert(res.data.msg);
          }
        },
        () => {
          this.loading = false;
        }
      );
    },
    /**
     *  设置天数
     */
    setDays: function(num) {
      let that = this;
      that.dayChange = num;
      switch (num) {
        case 0:
          that.money = {
            pt: that.info.totalPrice,
            hh: that.info.partnerTotalPrice,
            fw: that.info.serviceTotalPrice,
            yj: that.info.backstageTotalPrice
          };
          break;
        case 1:
          that.money = {
            pt: that.info.totalTodayPrice,
            hh: that.info.partnerTodayTotalPrice,
            fw: that.info.serviceTodayTotalPrice,
            yj: that.info.backstageTodayTotalPrice
          };
          break;
        case 2:
          that.money = {
            pt: that.info.totalWeekPrice,
            hh: that.info.partnerWeekTotalPrice,
            fw: that.info.serviceWeekTotalPrice,
            yj: that.info.backstageWeekTotalPrice
          };
          break;
        case 3:
          that.money = {
            pt: that.info.totalMonPrice,
            hh: that.info.partnerMonTotalPrice,
            fw: that.info.serviceMonTotalPrice,
            yj: that.info.backstageMonTotalPrice
          };
          break;
      }
      console.log(that.money);
    },
    /**
     *  查询财务列表
     */
    getFinList: function(num) {
      this.loading = true;
      let that = this;
      this.info = {};
      axios({
        method: "post",
        url: `${that.$store.state.url}/tWithdrawal/selectDrawal`,
        data: qs.stringify(that.params)
      }).then(
        res => {
          this.loading = false;
          if (res.data.code == 0) {
            that.info = res.data.data;
            this.pageTotal = Math.ceil(res.data.count / 10);
            that.setDays(that.dayChange);
          } else {
            that.$alert(res.data.msg);
          }
        },
        () => {
          this.loading = false;
        }
      );
    },
    /*
     * 根据时间毫秒数 返回年月日
     */
    setDate: function(str) {
      let times = new Date(str);
      return `${times.getFullYear()}-${
        times.getMonth() +1< 10 ? "0" + (times.getMonth() + 1) : times.getMonth() + 1
      }-${times.getDate() < 10 ? "0" + times.getDate() : times.getDate()}`;
    },
    /**
     * 根据时间毫秒数 返回时分秒
     */
    setTime: function(str) {
      let times = new Date(str);
      return `${
        times.getHours() < 10 ? "0" + times.getHours() : times.getHours()
      }:${
        times.getMinutes() < 10 ? "0" + times.getMinutes() : times.getMinutes()
      }:${
        times.getSeconds() < 10 ? "0" + times.getSeconds() : times.getSeconds()
      }`;
    }
  },
  mounted() {
    this.getFinList();
    this.getRole();
  }
};
</script>
<style scoped>
.screen {
  /* width: 1520px; */
  height: 60px;
  background: #f6f6f6;
  line-height: 60px;
  font-family: PingFangSC-Medium;
  font-size: 18px;
  color: #888888;
  margin-top: 30px;
  margin-bottom: 26px;
}
.screen img {
  float: left;
  width: 27px;
  height: 27px;
  margin-left: 10px;
  margin-top: 16px;
  margin-right: 18px;
}
.sel {
  height: 40px;
  line-height: 40px;
  /* width: 1520px; */
}
.sel > span {
  font-weight: bold;
  font-size: 18px;
  color: #000000;
  float: left;
}
.sel > span:last-of-type {
  margin-left: 20px;
}
.sel > input {
  background: #ffffff;
  border: 1px solid #979797;
  box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5);
  width: 317px;
  height: 38px;
  font-size: 18px;
  color: #888888;
  text-align: center;
  float: left;
  outline: none;
}
.sel > select {
  background: #ffffff;
  border: 1px solid #979797;
  box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5);
  width: 317px;
  height: 38px;
  font-size: 18px;
  color: #888888;
  text-align: center;
  float: left;
  outline: none;
  padding-left: 70px;
}
.sel-btn {
  background: #085dab;
  border: 1px solid #085dab;
  width: 140px;
  height: 38px;
  font-size: 18px;
  color: #ffffff;
  text-align: center;
  float: left;
  margin-left: 10px;
  cursor: pointer;
}

.cbody {
  /* float: left; */
  padding-top: 25px;
}
.info {
  /* width: 1504px; */

  height: 140px;
  background: #f6f6f6;
  margin-left: 4px;
}
.top {
  /* margin-top: 7px; */
  height: 40px;
  text-align: center;
  width: 440px;
  color: #1875f0;
  border: 2px solid #1875f0;
  border-radius: 4px;
  display: flex;
  /* margin-bottom: 38px;
  margin-left: 476px; */
  box-sizing: border-box;
  margin: 0 auto 25px;
}
.top > div {
  flex: 1;
  /* height: 40px; */
  line-height: 40px;
  font-size: 14px;
  border-left: 2px solid #1875f0;
  font-weight: bold;
  cursor: pointer;
  box-sizing: border-box;
}
.top :first-child {
  border: 0;
}
.top .hac {
  background: #1875f0;
  color: #fff;
}
.head {
  display: flex;
  /* width: 1520px; */
}
.head > div {
  flex: 1;
  border-left: 1px solid #fff;
  height: 140px;
  background: #f6f6f6;
}
.head :first-child {
  border-left: 0px solid #fff;
}
.name {
  font-size: 18px;
  color: #000000;
  height: 24px;
  text-align: center;
  margin-top: 23px;
  margin-bottom: 27px;
  font-weight: bold;
}
.count {
  height: 50px;
  font-size: 36px;
  color: #085dab;
  text-align: center;
  line-height: 50px;
}
.tabs {
  margin-top: 38px;
  border: 1px solid #dddddd;
  width: 398px;
  height: 67px;
  display: flex;
  font-size: 20px;
}
.tabs > div {
  flex: 1;
  font-size: 20px;
  height: 67px;
  line-height: 67px;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
}
.tabs:first-child {
  border-right: 1px solid #ddd;
}
.tabs .tabac {
  background: #e0eefe;
}
.thead {
  background: #e0eefe;
  border: 1px solid #dddddd;
  /* width: 1488px; */
  height: 67px;
  line-height: 67px;
}
.thead > div {
  float: left;
  height: 67px;
  border-right: 1px solid #ddd;
  text-align: center;
  font-weight: bold;
  font-size: 20px;
  box-sizing: border-box;
}
.tbody {
  /* width: 1490px; */
  /* display: inline-block; */
  overflow: hidden;
  height: 160px;
  border: 1px solid #ddd;
  box-sizing: border-box;
  margin-top: -2px;
}
.tbody > div {
  height: 158px;
  /* line-height: 160px; */
  float: left;
  border-right: 1px solid #ddd;
  box-sizing: border-box;
  text-align: center;
  font-size: 18px;
  color: #4a4a4a;
  font-weight: bold;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
.tbody > div > span {
  line-height: 30px;
  padding: 0 20px;
  text-align: left;
}
.tbody > div > div {
  height: 30px;
  line-height: 30px;
  text-align: center;
  /* width: 240px; */
}
.username {
  /* width: 200px; */
  width: 14%;
}
.account {
  /* width: 240px; */
  width: 14%;
}
.phone {
  width: 188px;
  width: 14%;
}
.txmoney {
  width: 222px;
  width: 14%;
}
.tbody .txmoney {
  color: #fe0000;
}
.sqtime {
  /* width: 220px; */
  width: 14%;
}
.states {
  /* width: 216px; */
  width: 14%;
}
.ctrl {
  /* width: 195px; */
  width: 16%;
}
.tbody .ctrl {
  /* width: 195px; */
  align-items: center;
  display: flex;
}
.ctrl a {
  color: #085dab;
}
</style>


